import React, { Component } from 'react'

class Footer extends Component {
    constructor (props) {
        super(props)
        this.state = {
            age: props.pcage
        };
        // 这边绑定是必要的，这样 `this` 才能在回调函数中使用
        this.addAge = this.addAge.bind(this);
    }
    
    addAge () {
        // this.props.pcage += 3
        // this.age += 3
        // sst
        this.setState({
            age: this.state.age + 2
        });
        // this.state.age += 2;
        console.log(this.state.age);
        
    }
    handleSend () {
        this.props.callback(this.state.age);
    }
    maopaosort () {
        // 冒泡排序
        console.log('冒泡排序');
        let srcArray = [4,3,2,1];
        let temp = 0;
        // for(let i = 0; i< srcArray.length; i++){
        //     for(let j = 0; j< srcArray.length-i; j++){
        //         if(srcArray[i] < srcArray[j]){
        //             temp = srcArray[i];
        //             srcArray[i] = srcArray[j];
        //             srcArray[j] = temp;
        //         }
        //         console.log(`外${i}a${srcArray[i]}内第${j}轮:${srcArray}`);
        //     }
        //     console.log(`第${i}轮:${srcArray}`);
        // }
        // 3 2 1
        for (let i = 0; i < srcArray.length; i++) {
            for (let j = 0; j < srcArray.length - i; j++) {
                if (srcArray[j] > srcArray[j+1]) {
                    temp = srcArray[j];
                    srcArray[j] = srcArray[j+1];
                    srcArray[j+1] = temp;
                }
                console.log(`外${i}a${srcArray[j]}内第${j}轮:${srcArray}`);
            }
            console.log(`第${i}轮:${srcArray}`);
        }

    }
    xuanzesort () {
        // 选择排序
        let src = [4,3,2,1];
        for(let i = 0; i < src.length ;i++){
            let minIndex = 0;
            let minTemp = Number.MAX_VALUE;
            for(let j = i; j< src.length ; j++){
                if(src[j] < minTemp){
                    // 记录最小下标
                    minIndex = j;
                    minTemp = src[j];
                }
            }

            // 交换最小值
            let temp = src[i];
            src[i] = minTemp;
            src[minIndex] = temp;
        }
        console.log('====================================');
        console.log(src);
        console.log('====================================');
    }
    render () {
        return (
            <div>
                <h2>your age:{this.state.age}</h2>
                <button className="btn btn-primary" onClick={this.addAge}>点击事件</button>
                <button className="btn btn-danger" onClick={()=>{this.maopaosort()}}>冒泡排序</button>
                <button className="btn btn-warning" onClick={() => { this.xuanzesort() }}>选择排序</button>
                {/* <button className="btn btn-info" onClick={() => { this.props.callback(this.state.age)}}>子组件向父组件传值</button> */}
                <button className="btn btn-info" onClick={this.handleSend.bind(this)}>子组件向父组件传值</button>
            </div>
        )
    }
}

export default Footer